<template>
  <svg xmlns="http://www.w3.org/2000/svg" :width="_width" :height="_height" :spin="spin" :rtl="rtl" viewBox="0 0 48 48" preserveAspectRatio="xMidYMid meet" fill="none" role="presentation" ref="host">
    <g>
      <path stroke-linejoin="round" stroke-width="4" d="M36.686 15.171a15.37 15.37 0 0 1 2.529 6.102H44v5.454h-4.785a15.37 15.37 0 0 1-2.529 6.102l3.385 3.385-3.857 3.857-3.385-3.385a15.37 15.37 0 0 1-6.102 2.529V44h-5.454v-4.785a15.37 15.37 0 0 1-6.102-2.529l-3.385 3.385-3.857-3.857 3.385-3.385a15.37 15.37 0 0 1-2.529-6.102H4v-5.454h4.785a15.37 15.37 0 0 1 2.529-6.102l-3.385-3.385 3.857-3.857 3.385 3.385a15.37 15.37 0 0 1 6.102-2.529V4h5.454v4.785a15.37 15.37 0 0 1 6.102 2.529l3.385-3.385 3.857 3.857-3.385 3.385Z" data-follow-fill="currentColor" data-follow-stroke="currentColor" :fill="_fill" :stroke="_stroke" />
      <path stroke-linejoin="round" stroke-width="4" stroke="#fff" fill="#fff" d="M24 29a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z" />
    </g>
  </svg>
</template>
<script setup>
import { ref, computed, onMounted, onUpdated } from 'vue';
const props = defineProps({
  width: {
    type: [Number, String],
    required: false
  },
  height: {
    type: [Number, String],
    required: false
  },
  stroke: {
    type: String,
    required: false
  },
  fill: {
    type: String,
    required: false
  },
  color: {
    type: String,
    required: false
  },
  spin: {
    type: Boolean,
    required: false
  },
  rtl: {
    type: Boolean,
    required: false
  }
});
const size = '1em';

const _fill = computed(() => props.fill || props.color || undefined);
const _stroke = computed(() => props.stroke || props.color || undefined);
const _width = computed(() => props.width || size || undefined);
const _height = computed(() => props.height || size || undefined);
const host = ref(null);

onMounted(() => {
  if (!_fill.value) {
    host.value?.querySelectorAll('[data-follow-fill]').forEach((item) => {
      item.setAttribute('fill', item.getAttribute('data-follow-fill') || '');
    });
  }
  if (!_stroke.value) {
    host.value?.querySelectorAll('[data-follow-stroke]').forEach((item) => {
      item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '');
    });
  }
});
onUpdated(() => {
  if (!_fill.value) {
    host.value?.querySelectorAll('[data-follow-fill]').forEach((item) => {
      item.setAttribute('fill', item.getAttribute('data-follow-fill') || '');
    });
  }
  if (!_stroke.value) {
    host.value?.querySelectorAll('[data-follow-stroke]').forEach((item) => {
      item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '');
    });
  }
});
</script>

<style scoped>
svg[spin='true'] {
  animation: iconpark-spin 1s infinite linear;
}

svg[spin='true'][rtl='true'] {
  animation: iconpark-spin-rtl 1s infinite linear;
}

svg[rtl='true'] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes iconpark-spin-rtl {
  0% {
    -webkit-transform: scaleX(-1) rotate(0);
    transform: scaleX(-1) rotate(0);
  }

  100% {
    -webkit-transform: scaleX(-1) rotate(360deg);
    transform: scaleX(-1) rotate(360deg);
  }
}
</style>
